// src/index.js 是js的入口文件
// 引入ReactDOM
import ReactDOM from "react-dom/client";
import "./assets/index.css";
import "./assets/list.css";
// 创建一个JSX
const data = [
  { month: "三月", day: "22", title: "学习React", desc: "40分钟" },
  { month: "三月", day: "23", title: "学习Vue", desc: "20分钟" },
  { month: "三月", day: "25", title: "学习Webpack", desc: "120分钟" },
  { month: "三月", day: "28", title: "学习TypeScript", desc: "70分钟" },
];
const App = (
  <div className="list">
    {data.map((item) => (
      <div className="list-item" key={item.title}>
        <div className="item-day">
          <div className="month">{item.month}</div>
          <div className="day">{item.day}</div>
        </div>
        <div className="item-contnet">
          <p className="title">{item.title}</p>
          <p className="desc">{item.desc}</p>
        </div>
      </div>
    ))}
  </div>
);

// 创建根容器
const root = ReactDOM.createRoot(document.getElementById("root"));
// 渲染
root.render(App);
